<%--
  Created by IntelliJ IDEA.
  User: jly
  Date: 2017/8/12
  Time: 15:03
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path;
    request.setAttribute("basePath", basePath);
%>
<html>
<head>
    <title>easyui table</title>
    <script src="${basePath}/resources/easyui1.4/jquery.min.js"></script>
    <script src="${basePath}/resources/easyui1.4/jquery.easyui.min.js"></script>
    <script src="${basePath}/resources/easyui1.4/locale/easyui-lang-zh_CN.js"></script>
    <!-- 引入easyUi默认的CSS格式--蓝色 -->
    <link rel="stylesheet" type="text/css"	href="${basePath}/resources/easyui1.4/themes/default/easyui.css" />
    <!-- 引入easyUi小图标 -->
    <link rel="stylesheet" type="text/css"	href="${basePath}/resources/easyui1.4/themes/icon.css" />
</head>
<body>
    <table id="roleGrid" style="width: 800px;height: 400px;"> </table>
</body>

<script type="text/javascript">

    $(function () {
        LoadGrid();
    })

    //加载表格！！！
    function LoadGrid() {
        $('#roleGrid').datagrid({
            width: 900,
            striped: true,  //交替条纹
            fitColumns: true,  //防止水平滚动
            fit: true,//自动补全
            iconCls: "icon-save",//图标
            idField: 'user_id', //唯一列
            url: "${basePath}/user/table",
            dataType: "json",
            singleSelect: true, //设置为true将只允许选择一行
            loadMsg: '正在拼命加载,请稍后...',
            rownumbers: false,  //显示行数
            pagination: true, //底部分页工具栏
            nowrap: false,  //截取超出部分的数据
            checkOnSelect: true,//点击一行的时候 checkbox checked(选择)/unchecked(取消选择)
            queryParams:{"test":"p"},
            pageNumber: 1,//初始化分页码。
            pageSize: 5, //初始化每页记录数。
            pageList: [5, 10, 30],  //初始化每页记录数列表
            showFooter: false, //定义是否显示行底
            columns: [[
                { field: "user_id", title: "编号", width: 60, align: "center", sortable: "true" },
                { field: "user_name", title: "名称", width: 100, align: "center" },
                {
                    field: "edit", title: "操作", align: "center", width: 80, formatter: function (value, row, index) {
                    var detail = '<a style="padding:1px;color:black;" onclick="editRole(' + index + ')"><i class="fa fa-edit"></i>编辑</a>';
                    var deleteBtn = '<a style="color:black;" onclick="delRole(' + index + ')"><i class="fa fa-trash-o"></i>删除</>';
                    var setrole = '<a style="color:black;" onclick="setRights(' + index + ')"><i class="fa fa-exclamation-triangle"></i>设置权限</>';
                    return "  " + detail + " | " + deleteBtn + " | " + setrole;
                }
                }
            ]] //列
        });
    };

    function editRole(i) { //编辑按钮的方法
        var rows = $("#roleGrid").datagrid("getRows");
        layer.open({
            title: false,
            type: 2,
            closeBtn: false,
            area: ['420px', '418px'],
            skin: 'layui-layer-rim', //加上边框
            content: ['/Admin/ShowForm/EidtRole', 'no'],
            success: function (layero, index) {
                var body = layer.getChildFrame('body', index);
                body.contents().find("#roleId").val(rows[i].RoleId);
                body.contents().find("#roleName").val(rows[i].RoleName);
                if (rows[i].RoleRemarks != "-") {
                    body.contents().find("#remarks").val(rows[i].RoleRemarks);
                }
                body.contents().find("#isstutas").val(rows[i].IsStatus);
            }
        });
    }

    function delRole(i) { //删除用户
        var rows = $("#roleGrid").datagrid("getRows");

        var postData = {
            roleId: rows[i].RoleId
        };

        layer.confirm('确认删除该角色？', {
            btn: ['确认', '取消'], //按钮
            shade: false //不显示遮罩
        }, function (index) {
            $.ajax({
                type: "POST",
                url: "",
                data: postData,
                success: function (result) {
                    if (result == "true") {
                        layer.msg("操作成功！", {
                            icon: 6,
                            time: 1000,
                        }, function () {
                            $("#roleGrid").datagrid("reload");
                            layer.close(index);
                        });
                    } else if (result == "false") {
                        layer.msg("操作失败！", { icon: 2 });
                    } else if (result == "msg") {
                        layer.msg("系统错误,请联系管理员！", { icon: 0 });
                    }
                }
            });
        }, function (index) {
            layer.close(index);
        });
    }
</script>

</html>
